<template>
    <div class="index-lists">
        <el-card class="!border-none" shadow="never">
            <el-form ref="formRef" class="mb-[-16px]" :model="queryParams" :inline="true">
                <el-form-item label="公开号" prop="publicationNumber">
                    <el-input class="w-[280px]" v-model="queryParams.publicationNumber" />
                </el-form-item>
                <el-form-item label="合同编号" prop="contractNo">
                    <el-select v-model="queryParams.contractNo" class="w-[280px]" clearable>
                        <el-option label="请选择字典生成" value="" />
                    </el-select>
                </el-form-item>
                <el-form-item label="客户文号" prop="customerDocumentNumber">
                    <el-input class="w-[280px]" v-model="queryParams.customerDocumentNumber" />
                </el-form-item>
                <el-form-item label="申请人" prop="applicant">
                    <el-input class="w-[280px]" v-model="queryParams.applicant" />
                </el-form-item>
                <el-form-item label="我方文号" prop="ourDocumentNumber">
                    <el-input class="w-[280px]" v-model="queryParams.ourDocumentNumber" />
                </el-form-item>
                <el-form-item label="申请号" prop="applicationNumber">
                    <el-input class="w-[280px]" v-model="queryParams.applicationNumber" />
                </el-form-item>
                <el-form-item label="案件名称" prop="caseName">
                    <el-input class="w-[280px]" v-model="queryParams.caseName" />
                </el-form-item>
                <el-form-item label="案件类型" prop="caseType">
                    <el-select v-model="queryParams.caseType" class="w-[280px]" clearable>
                        <el-option label="请选择字典生成" value="" />
                    </el-select>
                </el-form-item>
                <el-form-item label="开卷日期" prop="openingDate">
                    <daterange-picker v-model:startTime="queryParams.createTimeStart" v-model:endTime="queryParams.createTimeEnd" />
                </el-form-item>
                <el-form-item style="display: ruby-text; margin-top: 40px">
                    <el-button type="primary" @click="resetPage">查询</el-button>
                    <el-button type="primary" @click="resetParams">重置</el-button>
                    <el-button type="primary" @click="handleAdd()">
                        <template #icon>
                            <icon name="el-icon-Plus" />
                        </template>
                        新增
                    </el-button>
                    <el-button v-perms="['clientcase:add']" type="primary" @click="handleQuery()">
                        <template #icon>
                            <icon name="local-icon-shezhi" />
                        </template>
                        设置案件第一联系人
                    </el-button>
                    <el-button type="primary">
                        <template #icon>
                            <icon name="el-icon-Avatar" />
                        </template>
                        修改业务员
                    </el-button>
                    <el-button type="primary">
                        <template #icon>
                            <icon name="local-icon-shouyiren" />
                        </template>
                        修改业务助理
                    </el-button>
                    <el-button type="primary">
                        <template #icon>
                            <icon name="local-icon-set_user" />
                        </template>
                        修改流程人员
                    </el-button>
                    <el-button type="primary" v-perms="['clientcase:add']">
                        <template #icon>
                            <icon name="local-icon-user_biaoqian" />
                        </template>
                        修改原业务员
                    </el-button>
                </el-form-item>
            </el-form>
        </el-card>
        <el-card class="!border-none mt-4" shadow="never" style="margin-top: -20px">
            <!--<el-table class="mt-4" size="large" v-loading="pager.loading" :data="pager.lists">-->
            <!--  <el-table-column label="公开号" prop="publicationNumber" min-width="100"/>-->
            <!--  <el-table-column label="合同编号" prop="contractNo" min-width="100"/>-->
            <!--  <el-table-column label="合同名称" prop="contractName" min-width="100"/>-->
            <!--  <el-table-column label="客户文号" prop="customerDocumentNumber" min-width="100"/>-->
            <!--  <el-table-column label="申请人编号" prop="applicantId" min-width="100"/>-->
            <!--  <el-table-column label="申请人" prop="applicant" min-width="100"/>-->
            <!--  <el-table-column label="我方文号" prop="ourDocumentNumber" min-width="100"/>-->
            <!--  <el-table-column label="申请号" prop="applicationNumber" min-width="100"/>-->
            <!--  <el-table-column label="申请日" prop="applicationDate" min-width="100"/>-->
            <!--  <el-table-column label="案件名称" prop="caseName" min-width="100"/>-->
            <!--  <el-table-column label="案件类型编号" prop="caseTypeId" min-width="100"/>-->
            <!--  <el-table-column label="案件类型" prop="caseType" min-width="100"/>-->
            <!--  <el-table-column label="案件状态编号" prop="caseStateId" min-width="100"/>-->
            <!--  <el-table-column label="案件状态" prop="caseState" min-width="100"/>-->
            <!--  <el-table-column label="业务类型编号" prop="businessTypeId" min-width="100"/>-->
            <!--  <el-table-column label="业务类型" prop="businessType" min-width="100"/>-->
            <!--  <el-table-column label="申请类型编号" prop="applicationTypeId" min-width="100"/>-->
            <!--  <el-table-column label="申请类型" prop="applicationType" min-width="100"/>-->
            <!--  <el-table-column label="申请国家" prop="designatedCountry" min-width="100"/>-->
            <!--  <el-table-column label="第一联系人" prop="firstContact" min-width="100"/>-->
            <!--  <el-table-column label="开卷日期" prop="openingDate" min-width="100"/>-->
            <!--  <el-table-column label="业务人员编号" prop="businessPersonnelId" min-width="100"/>-->
            <!--  <el-table-column label="业务人员" prop="businessPersonnel" min-width="100"/>-->
            <!--  <el-table-column label="原业务员编号" prop="originalSalesmanId" min-width="100"/>-->
            <!--  <el-table-column label="原业务员" prop="originalSalesman" min-width="100"/>-->
            <!--  <el-table-column-->
            <!--      label="承办部门编号"-->
            <!--      prop="undertakeDepartmentId"-->
            <!--      min-width="100"-->
            <!--  />-->
            <!--  <el-table-column label="承办部门" prop="undertakeDepartment" min-width="100"/>-->
            <!--  <el-table-column label="流程人员编号" prop="processPersonnelId" min-width="100"/>-->
            <!--  <el-table-column label="流程人员" prop="processPersonnel" min-width="100"/>-->
            <!--  <el-table-column label="操作" width="120" fixed="right">-->
            <!--    <template #default="{ row }">-->
            <!--      <el-button-->
            <!--          v-perms="['clientcase:edit']"-->
            <!--          type="primary"-->
            <!--          link-->
            <!--          @click="handleEdit(row)"-->
            <!--      >-->
            <!--        编辑-->
            <!--      </el-button>-->
            <!--      <el-button-->
            <!--          v-perms="['clientcase:del']"-->
            <!--          type="danger"-->
            <!--          link-->
            <!--          @click="handleDelete(row.id)"-->
            <!--      >-->
            <!--        删除-->
            <!--      </el-button>-->
            <!--    </template>-->
            <!--  </el-table-column>-->
            <!--</el-table>-->
            <el-table class="mt-4" size="large" v-loading="pager.loading" :data="pager.lists" stripe>
                <el-table-column label="相关案件" type="selection" width="55" />
                <el-table-column label="案件名称" prop="caseName" min-width="100" />
                <el-table-column label="我方文号" prop="ourRef" min-width="100" />
                <el-table-column label="客户文号" prop="customerDocumentNumber" min-width="100" />
                <el-table-column label="合同编号" prop="contractNumber" min-width="100" />
                <el-table-column label="申请类型" prop="putinType" min-width="100" />
                <el-table-column label="处理事项" prop="handlingInformation" min-width="100" />
                <el-table-column label="技术领域" prop="conductor" min-width="100" />
                <el-table-column label="国家（地区）" prop="designatedCountry" min-width="100" />
                <el-table-column label="承办部门" prop="undertakingDepartment" min-width="100" />
                <el-table-column label="处理人" prop="conductor" min-width="100" />
                <el-table-column label="指定处理人" prop="designatedCountry" min-width="100" />
                <el-table-column label="操作" width="120" fixed="right">
                    <template #default="{ row }">
                        <el-button type="primary" link @click="handleEdit(row)">
                            编辑
                        </el-button>
                        <el-button type="danger" link @click="handleDelete(row.id)">
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="flex justify-end mt-4">
                <pagination v-model="pager" @change="getLists" />
            </div>
        </el-card>
        <edit-popup v-if="showEdit" ref="editRef" @success="getLists" @close="showEdit = false" />
        <query-popup v-if="queryEdit" ref="queryRef" @success="getLists" @close="queryEdit = false" />
        <un-edit-popup v-if="showUnEdit" ref="unEditRef" @success="getLists" @close="showUnEdit = false" />
    </div>
</template>
<script lang="ts" setup name="clientcase">
// import {clientcaseDelete, clientcaseLists} from '@/api/clientcase'
import { caseDelete, caseLists } from '@/api/case'
import { usePaging } from '@/hooks/usePaging'
import feedback from '@/utils/feedback'
import EditPopup from './edit.vue'

const editRef = shallowRef<InstanceType<typeof EditPopup>>()
import QueryPopup from './queryclientcase.vue'

const queryRef = shallowRef<InstanceType<typeof QueryPopup>>()
import unEditPopup from './uncoilEdit.vue'

const unEditRef = shallowRef<InstanceType<typeof unEditPopup>>()
const showUnEdit = ref(false)
const showEdit = ref(false)
const queryEdit = ref(false)
const queryParams = reactive({
    publicationNumber: '',
    contractNo: '',
    customerDocumentNumber: '',
    applicant: '',
    ourDocumentNumber: '',
    applicationNumber: '',
    caseName: '',
    caseType: '',
    openingDateStart: '',
    openingDateEnd: ''
})

const { pager, getLists, resetPage, resetParams } = usePaging({
    fetchFun: caseLists,
    params: queryParams
})

// const handleAdd = async () => {
//     showEdit.value = true
//     await nextTick()
//     editRef.value?.open('add')
// }
const handleQuery = async () => {
    queryEdit.value = true
    await nextTick()
    queryRef.value?.open('add')
}

const handleAdd = async () => {
    showUnEdit.value = true
    await nextTick()
    console.log(pager.lists, showUnEdit.value)
    unEditRef.value?.open('add')
}

const handleEdit = async (data: any) => {
    showUnEdit.value = true
    await nextTick()
    unEditRef.value?.open('edit')
    unEditRef.value?.getDetail(data)
}

const handleDelete = async (id: number) => {
    await feedback.confirm('确定要删除？')
    await caseDelete({ id })
    feedback.msgSuccess('删除成功')
    getLists()
}

// getLists()
</script>
